<!DOCTYPE html>
<html lang="en">
<head>

    <title>系统首页</title>

    <#include "/include/header.ftl">


    <link rel="stylesheet" href="/static/css/ContentSytle.css">


    <script type="text/javascript" src="/static/js/X-admin/lib/jquery.lineProgressbar.js"></script>


    <!--自定义布局-->
    <link rel="stylesheet" href="/static/js/X-admin/lib/Gridster/jquery.gridster.min.css" />
    <script type="text/javascript" src="/static/js/X-admin/lib/Gridster/jquery.gridster.js" ></script>

    <!--echarts-->
    <script type="text/javascript" src="/static/js/X-admin/lib/echarts/echarts.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/echarts/china.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/echarts/theme.js"></script>

</head>
<body>

<div class="HomeOperating">
    <a href="javascript:;" class="gridsterEdit" onclick="enable(true)"><i></i><span>编辑首页</span></a>
    <a href="javascript:;" class="addECharts" id="addECharts"><i></i><span>添加报表</span></a>
</div>

<!--保存编辑-->
<div class="Home-fix">
    <button type="button" onclick="quit()" class="btn">取消</button>
    <button type="button" onclick="enable(false)" class="btn btn-Orange">保存</button>
</div>

<div class="gridster gridsterBox">
    <ul style="padding: 0">
        <!--
        gridster
        data-row：数据行，元素所存在的行数。
        data-col：数据列，元素所存在的列数。
        data-sizex:容器宽度
        data-sizey:容器高度
        -->
        <li id="echarts0" data-id="0"  data-row="1" data-col="1" data-sizex="1" data-sizey="1">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="rowIcon">
                <table>
                    <tr>
                        <td><img src="/static/images/Home-icon-1.png"/></td>
                        <td>账户余额（元）<span>2454.28</span></td>
                    </tr>
                </table>
            </div>
        </li>
        <li id="echarts1" data-id="1" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="rowIcon">
                <table>
                    <tr>
                        <td><img src="/static/images/Home-icon-2.png"/></td>
                        <td>我的佣金（元）<span class="Orange-text"><a href="javascript:;" onclick="top.$('#zhsy').click()">1806.00</a></span></td>
                    </tr>
                </table>
            </div>
        </li>
        <li id="echarts2" data-id="2" data-row="1" data-col="3" data-sizex="1" data-sizey="1">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="rowIcon">

                <table>
                    <tr>
                        <td><img src="/static/images/Home-icon-3.png"/></td>
                        <td>本月到期<span class="Orange-text"><a _href="xt-jsgl-qxsz.html" class="TabIframe" id="bydq"><span style='display: none'>本月到期</span>508</a></span></td>
                    </tr>
                </table>

            </div>
        </li>
        <li id="echarts3" data-id="3" data-row="1" data-col="4" data-sizex="1" data-sizey="1">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="rowIcon">


                <table>
                    <tr>
                        <td><img src="/static/images/Home-icon-4.png"/></td>
                        <td>流量告急 <span class="Orange-text"><a _href="xt-jsgl-qxsz.html" class="TabIframe" id="llgj"><span style='display: none'>流量告急</span>50</a></span></td>
                    </tr>
                </table>

            </div>
        </li>

        <li id="echarts4" data-id="4" data-row="2" data-col="1" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">物联网卡生命周期</div>
            <div class="dataCont">
                <div class="echartsBox" id="Pie" style="width:40%;float: left;"><!--饼图--></div>
                <!--数据条内容-->
                <div class="bar-line" style="width:60%;height:260px; float: left;">

                    <!--所有所有物联网卡数据-->
                    <div class="main_line_box" id="allBox">
                        <div class="tit">所有物联网卡<span>4175</span></div>
                        <div class="Linebox txt1 ">
                            <div class="lineNum"><h3>已激活<small class="Num"></small></h3><span>1125</span></div>
                            <div id="progressbar1"></div>
                        </div>
                        <div class="Linebox txt2">
                            <div class="lineNum"><h3>库存<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbar2"></div>
                        </div>
                        <div class="Linebox txt3">
                            <div class="lineNum"><h3>测试期<small class="Num"></small></h3><span>692</span></div>
                            <div id="progressbar3"></div>
                        </div>
                        <div class="Linebox txt4">
                            <div class="lineNum"><h3>已销卡<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbar4"></div>
                        </div>
                        <div class="Linebox txt5">
                            <div class="lineNum"><h3>已停卡<small class="Num"></small></h3><span>468</span></div>
                            <div id="progressbar5"></div>
                        </div>
                    </div>
                    <!--所有所有物联网卡数据 end-->

                    <!--移动数据-->
                    <div class="main_line_box" id="Box-10086">
                        <div class="tit">移动<span>4175</span></div>
                        <div class="Linebox txt1">
                            <div class="lineNum"><h3>已激活<small class="Num"></small></h3><span>1125</span></div>
                            <div id="progressbar10086-1"></div>
                        </div>
                        <div class="Linebox txt2">
                            <div class="lineNum"><h3>库存<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbar10086-2"></div>
                        </div>
                        <div class="Linebox txt3">
                            <div class="lineNum"><h3>测试期<small class="Num"></small></h3><span>692</span></div>
                            <div id="progressbar10086-3"></div>
                        </div>
                        <div class="Linebox txt4">
                            <div class="lineNum"><h3>已销卡<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbar10086-4"></div>
                        </div>
                        <div class="Linebox txt5">
                            <div class="lineNum"><h3>已停卡<small class="Num"></small></h3><span>468</span></div>
                            <div id="progressbar10086-5"></div>
                        </div>
                    </div>

                    <!--电信数据-->
                    <div class="main_line_box" id="Box-Telecom" >
                        <div class="tit">电信<span>4175</span></div>
                        <div class="Linebox txt1">
                            <div class="lineNum"><h3>已激活<small class="Num"></small></h3><span>1125</span></div>
                            <div id="progressbarTelecom-1"></div>
                        </div>
                        <div class="Linebox txt2">
                            <div class="lineNum"><h3>库存<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbarTelecom-2"></div>
                        </div>
                        <div class="Linebox txt3">
                            <div class="lineNum"><h3>测试期<small class="Num"></small></h3><span>692</span></div>
                            <div id="progressbarTelecom-3"></div>
                        </div>
                        <div class="Linebox txt4">
                            <div class="lineNum"><h3>已销卡<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbarTelecom-4"></div>
                        </div>
                        <div class="Linebox txt5">
                            <div class="lineNum"><h3>已停卡<small class="Num"></small></h3><span>468</span></div>
                            <div id="progressbarTelecom-5"></div>
                        </div>
                    </div>

                    <!--联通数据-->
                    <div class="main_line_box" id="Box-Uincom" >
                        <div class="tit">联通<span>4175</span></div>
                        <div class="Linebox txt1">
                            <div class="lineNum"><h3>已激活<small class="Num"></small></h3><span>1125</span></div>
                            <div id="progressbarUincom-1"></div>
                        </div>
                        <div class="Linebox txt2">
                            <div class="lineNum"><h3>库存<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbarUincom-2"></div>
                        </div>
                        <div class="Linebox txt3">
                            <div class="lineNum"><h3>测试期<small class="Num"></small></h3><span>692</span></div>
                            <div id="progressbarUincom-3"></div>
                        </div>
                        <div class="Linebox txt4">
                            <div class="lineNum"><h3>已销卡<small class="Num"></small></h3><span>945</span></div>
                            <div id="progressbarUincom-4"></div>
                        </div>
                        <div class="Linebox txt5">
                            <div class="lineNum"><h3>已停卡<small class="Num"></small></h3><span>468</span></div>
                            <div id="progressbarUincom-5"></div>
                        </div>
                    </div>
                </div>
                <!--数据条内容end-->
            </div>
        </li>

        <li id="echarts13" data-id="13" data-row="2" data-col="2" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">运营报表1</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="select">
                        <select lay-filter="">
                            <option value="产品A">产品A</option>
                            <option value="产品B">产品B</option>
                        </select>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="2018-09">2019</option>
                            <option value="2018-10">2018</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">数量/张</div>
                </div>
                <div class="echartsBox" id="barList"><!--运营1--></div>
            </div>
        </li>
        <li id="echarts14" data-id="14" data-row="5" data-col="1" data-sizex="4" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">运用报表2</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="selectCheckbox">
                        <div class="layui-select-title"><input type="text" placeholder="请选择" value="全部" readonly="" id="select-checkbox-input" class="layui-input layui-unselect"><i class="layui-edge"></i></div>
                        <div class="select-checkbox-cont" id="select-checkbox-cont" >
                            <p><label><input type='radio' name='Product' title="产品A" value="产品A" lay-filter="Product"></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="新用户" value="新用户" lay-filter="Product"/></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="重点关注用户" value="重点关注用户" lay-filter="Product"/></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="优质用户" value="优质用户" lay-filter="Product"/></label></p>

                            <p><label><input type='radio' name='Product' title="产品B" value="产品B" lay-filter="Product"></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="新用户" value="新用户" lay-filter="Product"/></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="重点关注用户" value="重点关注用户" lay-filter="Product"/></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="优质用户" value="优质用户" lay-filter="Product"/></label></p>

                            <p><label><input type='radio' name='Product' title="产品C" value="产品C" lay-filter="Product"></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="新用户" value="新用户" lay-filter="Product"/></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="重点关注用户" value="重点关注用户" lay-filter="Product"/></label></p>
                            <p class="p-checkbox"><label><input type="radio" name="Product" title="优质用户" value="优质用户" lay-filter="Product"/></label></p>

                            <!--<p><label><input type='radio' name='Product' id="radio-pro-1" value='1' lay-ignore><i></i><span>产品A</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product1" data-val="1" lay-ignore/><i></i><span>新用户</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product1" data-val="1" lay-ignore/><i></i><span>重点关注用户</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product1" data-val="1" lay-ignore/><i></i><span>优质用户</span></label></p>

                            <p><label><input type='radio' name='Product' id="radio-pro-2" value='2' lay-ignore><i></i><span>产品B</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product2" data-val="2" lay-ignore/><i></i><span>新用户</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product2" data-val="2" lay-ignore/><i></i><span>重点关注用户</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product2" data-val="2" lay-ignore/><i></i><span>优质用户</span></label></p>

                            <p><label><input type='radio' name='Product' id="radio-pro-3" value='3' lay-ignore><i></i><span>产品C</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product3" data-val="3" lay-ignore/><i></i><span>新用户</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product3" data-val="3" lay-ignore/><i></i><span>重点关注用户</span></label></p>
                            <p class="p-checkbox"><label><input type="checkbox" name="product3" data-val="3" lay-ignore/><i></i><span>优质用户</span></label></p>-->
                        </div>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="最近15天">最近12个月</option>
                            <option value="2019">2019</option>
                            <option value="2018">2018</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">总流量/G</div>
                    <div class="unitRight">流量/M</div>
                </div>
                <div class="echartsBox" id="MultiCurve2"><!--多曲线--></div>
            </div>
        </li>

        <li id="echarts5" data-id="5" data-row="2" data-col="2" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">客户卡激活数量</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="select">
                        <select lay-filter="">
                            <option value="按量统计">客户1</option>
                            <option value="按量统计1">客户2</option>
                        </select>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="本周">本周</option>
                            <option value="最近15天">最近15天</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">数量/张</div>
                </div>
                <div class="echartsBox" id="MultiCurve"><!--多曲线--></div>
            </div>
        </li>
        <li id="echarts6" data-id="6" data-row="5" data-col="1" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">客户使用激活续费TOP10</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="select">
                        <select lay-filter="LeaderboardSel" >
                            <option value="1">发卡激活数</option>
                            <option value="2">客户使用量</option>
                            <option value="3">卡激活率</option>
                            <option value="4">二次续费率</option>
                        </select>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="2018-09">2018-09</option>
                            <option value="2018-10">2018-10</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitBottom">数量/张</div>
                </div>
                <div class="echartsBox" id="Leaderboard"><!--排行榜--></div>
            </div>
        </li>

        <li id="echarts9" data-id="9" data-row="8" data-col="1" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">各套餐平均流量消耗</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="select">
                        <select lay-filter="">
                            <option value="200M">200M</option>
                            <option value="500M">500M</option>
                        </select>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">流量/M</div>
                </div>
                <div class="echartsBox" id="Line"><!--单曲线--></div>
            </div>
        </li>
        <li id="echarts10" data-id="10" data-row="5" data-col="3" data-sizex="2" data-sizey="6">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">各省份设备分布数量</div>
            <div class="dataCont" style="height: 400px;">
                <div class="echartsBox" id="Map" style="height: 400px;"><!--地区分布--></div>
            </div>
            <div class="Home-title">设备激活数/设备在线数</div>
            <div class="Home-filter" style="display: block!important;">
                <form class="layui-form">
                    <div class="select" id="x-city">
                        <select name="province" lay-filter="province">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont" style="height:176px; margin-top: 16px;">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">流量/M</div>
                </div>
                <div class="echartsBox" id="mapline" style="height:170px;"><!--地区分布曲线图--></div>
            </div>
        </li>
        <li id="echarts7" data-id="7" data-row="11" data-col="1" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">流量池激活数/流量消耗</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="select">
                        <select lay-filter="">
                            <option value="流量类型">流量类型</option>
                            <option value="流量类型">流量类型</option>
                        </select>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">数量/张</div>
                    <div class="unitRight">流量/G</div>
                </div>
                <div class="echartsBox" id="LineBar"><!--曲线柱形组合--></div>
            </div>
        </li>
        <li id="echarts8" data-id="8" data-row="11" data-col="3" data-sizex="2" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">充值续费/单卡流量</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="radioSel">
                        <a href="javascript:;" id="czxf" class="current">充值续费</a>
                        <a href="javascript:;" id="dkll">单卡流量</a>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">金额/元</div>
                </div>
                <div class="echartsBox" id="LineTab" ><!--单曲线Tab--></div>
            </div>
        </li>
        <li id="echarts11" data-id="11" data-row="14" data-col="1" data-sizex="4" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">充值续费/佣金统计</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="radioSel">
                        <a href="javascript:;" class="current" id="czxf1">充值续费</a>
                        <a href="javascript:;" id="czyj">充值佣金</a>
                    </div>
                    <div class="select">
                        <select lay-filter="">
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">金额/元</div>
                </div>
                <div class="echartsBox" id="LineTabBig"><!--大屏单曲线Tab--></div>
            </div>
        </li>
        <li id="echarts12" data-id="12" data-row="17" data-col="1" data-sizex="4" data-sizey="3">
            <div class="gridsterEditBox">
                <a href="javascript:;" class="SwitchBtn">切换</a>
                <a href="javascript:;" class="DelBtn">删除</a>
            </div>
            <div class="Home-title">流量统计</div>
            <div class="Home-filter">
                <form class="layui-form">
                    <div class="radioSel">
                        <a href="javascript:;" class="current" id="week">本周</a>
                        <a href="javascript:;" id="month">近30天</a>
                    </div>
                </form>
            </div>
            <div class="dataCont">
                <div class="unitBox">
                    <!--单位-->
                    <div class="unitLeft">流量/M</div>
                </div>
                <div class="echartsBox" id="multiLineBar"><!--单曲线与多柱状--></div>
            </div>
        </li>


    </ul>
</div>

<div class="copyright" style="position: static">©2004-2019 深圳市XXXX科技有限公司 版权所有<span style="margin-left:30px; ">当前版本V1.0.0</span></div>


<script type="text/javascript">
    /*****************************************************界面编辑拖动************************************************************/
    var widthBox =($(document.body).width()-75)/4;
    var gridster;
    gridster = $(".gridster > ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [widthBox, 100],
        min_cols:4
    }).data('gridster').disable();

    //按钮鼠标经过样式
    $('.HomeOperating a').mouseover(function () {$(this).addClass('current')});$('.HomeOperating a').mouseleave(function () {$(this).removeClass('current')});

    //编辑&保存主页
    function enable(enable) {
        if(enable){
            gridster&&gridster.enable();
            $('.Home-filter,.HomeOperating').hide();
            $('.gridsterEditBox,.Home-fix').show();
            $('.gridsterBox').addClass('EditBox')
        }else{
            top.layer.msg("<img src='/static/images/load.gif'/><span>正在为您保存，请稍候！</span>",{
                skin:'layerLoad',
                shade: [0.1, '#fff'],
                time:5000,//弹窗5秒后自动关闭,取消自动关闭设置为0
                end:function () {
                    //结束后回调
                    gridster&&gridster.disable();
                    $('.Home-filter,.HomeOperating').show();
                    $('.gridsterEditBox,.Home-fix').hide();
                    $('.gridsterBox').removeClass('EditBox');

                    top.layer.msg("<img src='/static/images/success.png'/><span>保存成功！</span>",{
                        skin:'layerMsg',
                        time:2000,
                        end:function () {
                            //结束后回调
                        }
                    });
                }
            });


        }
    }
    //退出
    function quit() {window.location.reload();}

    /*****************************************************界面编辑拖动 end************************************************************/



    /*****************************************************echarts 数据************************************************************/

    layui.use(['form','code'], function(){
        form = layui.form;layui.code();
        /*饼图数据*/
        //饼图
        var Pie = echarts.init(document.getElementById('Pie'));
        var Pieoption = {
            color:['#58b6ec','#ffb54b','#ff6f76'],
            //图例
            legend: {
                selectedMode:false,
                orient: 'horizontal',
                bottom:10,
                itemWidth:10,
                itemHeight:10,
                data:[
                    {name:'移动', icon:'roundRect'},
                    {name:'电信', icon:'roundRect'},
                    {name:'联通', icon:'roundRect'}
                ],
                textStyle:{fontFamily:'MicrosoftYaHei'}
            },
            series: [
                {
                    type:'pie',
                    radius: ['35%', '70%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    //物联网卡生命周期-饼图数值设置
                    data:[
                        {value:335, name:'移动'},
                        {value:310, name:'电信'},
                        {value:134, name:'联通'}
                    ],
                    //引导线数据
                    label:{
                        position:'inside',
                        formatter : function(params) {
                            return  params.percent.toFixed(0) + "%";
                        }
                    }
                }
            ]
        };
        Pie.setOption(Pieoption);//初始化饼图

        //三大运营商物联网卡总数据
        function allLine() {
            $('#allBox').show();
            $('#Box-Telecom,#Box-10086,#Box-Uincom').hide();
            $('#progressbar1').LineProgressbar({
                percentage: 1125/4175*100,//计算百分比  已激活数量/总数/*100
                ShowProgressCount:true,
                height:'3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#34CB49'
            });
            $('#progressbar2').LineProgressbar({
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height:'3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#1875F0'
            });
            $('#progressbar3').LineProgressbar({
                percentage: 692/4175*100,
                ShowProgressCount:true,
                height:'3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F9AD3D'
            });
            $('#progressbar4').LineProgressbar({
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height:'3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#737373'
            });
            $('#progressbar5').LineProgressbar({
                percentage: 468/4175*100,
                ShowProgressCount:true,
                height:'3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F74236'
            });
        }
        allLine();
        /*移动数据*/
        function Pie10086() {
            $('#Box-10086').show();
            $('#allBox,#Box-Telecom,#Box-Uincom').hide();
            //移动数据条详情
            $('#progressbar10086-1').LineProgressbar({
                //已激活
                percentage: 1125/4175*100,//计算百分比  已激活数量/总数/*100
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#34CB49'
            });
            $('#progressbar10086-2').LineProgressbar({
                //库存
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#1875F0'
            });
            $('#progressbar10086-3').LineProgressbar({
                //测试期
                percentage: 692/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F9AD3D'
            });
            $('#progressbar10086-4').LineProgressbar({
                //已销卡
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#737373'
            });
            $('#progressbar10086-5').LineProgressbar({
                //已停卡
                percentage: 468/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F74236'
            });
        }

        /*电信数据*/
        function PieTelecom() {
            $('#Box-Telecom').show();
            $('#allBox,#Box-10086,#Box-Uincom').hide();
            //电信数据条详情
            $('#progressbarTelecom-1').LineProgressbar({
                //已经激活
                percentage: 1125/4175*100,//计算百分比  已激活数量/总数/*100
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#34CB49'
            });
            $('#progressbarTelecom-2').LineProgressbar({
                //库存
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#1875F0'
            });
            $('#progressbarTelecom-3').LineProgressbar({
                //测试期
                percentage: 692/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F9AD3D'
            });
            $('#progressbarTelecom-4').LineProgressbar({
                //已销卡
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#737373'
            });
            $('#progressbarTelecom-5').LineProgressbar({
                //已经停卡
                percentage: 468/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F74236'
            });
        }

        /*联通数据*/
        function PieUincom() {
            //alert('联通');
            $('#Box-Uincom').show();
            $('#allBox,#Box-10086,#Box-Telecom').hide();

            //联通
            $('#progressbarUincom-1').LineProgressbar({
                percentage: 1125/4175*100,//计算百分比
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#34CB49'
            });
            $('#progressbarUincom-2').LineProgressbar({
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#1875F0'
            });
            $('#progressbarUincom-3').LineProgressbar({
                percentage: 692/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F9AD3D'
            });
            $('#progressbarUincom-4').LineProgressbar({
                percentage: 945/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#737373'
            });
            $('#progressbarUincom-5').LineProgressbar({
                percentage: 468/4175*100,
                ShowProgressCount:true,
                height: '3px',
                radius: '3px',
                backgroundColor:'#f2f2f2',
                fillBackgroundColor:'#F74236'
            });
        }

        /*饼图点击切换*/
        Pie.on('mousemove', function (param) {
            var index = param.dataIndex;
            if(index == 0){
                /*切换移动数据*/
                Pie10086()
            }
            if(index == 1){
                //切换电信数据
                PieTelecom()
            }
            if(index == 2){
                //切换联通数据
                PieUincom()
            }
        });
        Pie.on('mouseout', function (param) {allLine()});
        /*饼图数据 end*/


        //叠加柱形图
        var barList = echarts.init(document.getElementById('barList'));
        var barListoption ={
            color:['#58b6ec','#ffb54b','#ff6f76'],
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line',
                    lineStyle:{width:1, type:'dashed', color:'#c5c9ce'},
                    transitionDuration:0
                }

            },
            legend: {
                selectedMode:'multiple',
                orient: 'horizontal',
                bottom:'-4',
                data:[
                    {name:'新用户', icon:'roundRect'},
                    {name:'优质用户', icon:'roundRect'},
                    {name:'重点关注', icon:'roundRect'}
                ],
                itemWidth:10,itemHeight:10
            },
            grid: {left: '2%', right:'3%',top:35, bottom:30, containLabel: true},

            xAxis: {
                type: 'category',
                offset:5,
                data: ['01','02','03','04','05','06','07','08','09','10','11','12'],//客户卡激活数量X轴单位
                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisLabel: {show: true},
                axisTick:{show:false}
            },
            yAxis: {
                type: 'value',
                offset:10,
                axisLine:{lineStyle:{width:0}},
                axisTick:{show:false},
                splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}
            },

            series : [

                {
                    name:'新用户',
                    type:'bar',
                    barWidth:10,
                    stack: '数据',
                    data:[150, 100, 101, 134, 90, 200, 210, 101, 134, 90, 220, 210]
                },
                {
                    name:'优质用户',
                    type:'bar',
                    barWidth:10,
                    stack: '数据',
                    data:[134, 90, 200, 210, 101, 150, 100, 101, 134, 90, 220, 210]
                },
                {
                    name:'重点关注',
                    type:'bar',
                    barWidth:10,
                    stack: '数据',
                    data:[410, 101, 134, 90, 230,150, 232, 201, 154, 190, 330,  210]
                }


            ],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };
        barList.setOption(barListoption);

        /*双曲线*/
        var MultiCurve2 = echarts.init(document.getElementById('MultiCurve2'));
        var MultiCurve2option ={
            color:['#ff6f76','#58b6ec'],
            grid: {left: '1%', right:'1%',top:35, bottom:30, containLabel: true},
            legend: {
                selectedMode:false, orient: 'horizontal', bottom:'-4',
                data:[
                    {name:'总流量', icon:'roundRect'},
                    {name:'单卡平均用量', icon:'roundRect'}

                ],
                itemWidth:10,itemHeight:10
            },
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line',
                    lineStyle:{width:1, type:'dashed', color:'#c5c9ce'},
                    transitionDuration:0
                }

            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                offset:5,
                data: ['2018-01','2018-02','2018-03','2018-04','2018-05','2018-06','2018-07','2018-08','2018-09','2018-10','2018-11','2018-12'],//客户卡激活数量X轴单位                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#666'
                    }
                },
                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisTick:{show:false}
            },
            yAxis: [
                {
                    type: 'value',
                    offset:10,
                    axisLine:{lineStyle:{color:'#858585', width:0}},
                    axisTick:{show:false},
                    splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}
                },
                {
                    type: 'value',
                    offset:10,
                    axisLine:{lineStyle:{color:'#858585', width:0}},
                    splitLine: {show: false},
                    axisTick:{show:false}
                }
            ],

            series: [
                //客户卡激活数量-曲线数值设置

                {
                    name:'总流量',
                    type:'line',
                    barWidth: '6',
                    data:[122, 238, 217, 186, 175, 219, 226, 217, 186, 175, 219, 226],
                    symbol:'circle',
                    symbolSize:5
                },
                {
                    name:'单卡平均用量',
                    type:'line',
                    data:[232, 328, 357, 296, 275, 319, 326, 357, 296, 275, 319, 326],
                    yAxisIndex: 1,
                    symbol:'circle',
                    symbolSize:5
                }

            ],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };
        MultiCurve2.setOption(MultiCurve2option);
        /*多双曲线曲线 end*/

        //选择产品标签
        form.on('radio(Product)', function(data){
            $('#select-checkbox-input').val(data.value);
        });



        /*$('input[name=Product]').change(function () {
            var pro=$(this).val();
            //console.log("===="+pro);
            $("input[type=checkbox]").each(function () {
                var Aval = $(this).attr('data-val');
                if(Aval==pro){
                    //console.log("===="+Aval);
                    $(this).prop('checked',true);

                } else  {
                    //console.log("----"+Aval);
                    $(this).prop('checked',false);

                }
            });
        });
        //点击产品对应标签切换产品
        $('input[type=checkbox]').change(function () {
            var proCheckbox=$(this).attr('data-val');
            $("#radio-pro-"+proCheckbox).click()
        });*/


        /*多曲线*/
        var MultiCurve = echarts.init(document.getElementById('MultiCurve'));
        var MultiCurveoption ={
            color:['#58b6ec','#ffb54b','#ff6f76'],
            grid: {left: '2%', right:'3%',top:35, bottom:30, containLabel: true},
            legend: {
                selectedMode:false, orient: 'horizontal', bottom:'-4',
                data:[
                    {name:'移动', icon:'roundRect'},
                    {name:'电信', icon:'roundRect'},
                    {name:'联通', icon:'roundRect'}
                ],
                itemWidth:10,itemHeight:10
            },
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line',
                    lineStyle:{width:1, type:'dashed', color:'#c5c9ce'},
                    transitionDuration:0
                }

            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                offset:5,
                data: ['05/07','05/08','05/09','05/10','05/11','05/12','05/13'],//客户卡激活数量X轴单位
                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisLabel: {show: true},
                axisTick:{show:false}
            },
            yAxis: {
                type: 'value',
                offset:10,
                axisLine:{lineStyle:{width:0}},
                axisTick:{show:false},
                splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}
            },
            series: [
                //客户卡激活数量-曲线数值设置
                {
                    name:'移动',
                    type:'line',
                    data:[232, 328, 357, 296, 275, 319, 326],
                    symbol:'circle',
                    symbolSize:5
                },
                {
                    name:'电信',
                    type:'line',
                    barWidth: '6',
                    data:[122, 238, 217, 186, 175, 219, 226],
                    symbol:'circle',
                    symbolSize:5
                },
                {
                    name:'联通',
                    type:'line',
                    barWidth: '6',
                    data:[82, 168, 147, 96, 75, 119, 126],
                    symbol:'circle',
                    symbolSize:5
                }
            ],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };
        MultiCurve.setOption(MultiCurveoption);
        /*多曲线 end*/

        /*排行榜*/
        var Leaderboard = echarts.init(document.getElementById('Leaderboard'),'themeBlue');
        var Leaderboardoption ={
            grid: {left:0, right:20,top:0, bottom:30, containLabel: true},
            xAxis: {
                type: 'value',
                splitNumber:7,
                axisLabel: {formatter: '{value}'},
                splitLine: {show: true, lineStyle:{color:'#f1f3f8', type:'solid'}},//分割线
                axisTick:{show:false},//去掉刻度
                axisLine:{lineStyle:{color:'#858585', width:0}}//刻度宽度/字体颜色
            },
            yAxis: {
                type: 'category',
                inverse: true,
                data: ["陈进","施礼","郑石华","程杜","沈东","刘华","AGR","李林","张海","周丽"],
                axisTick:{show:false},//去掉刻度
                axisLine:{lineStyle:{color:'#858585', width:0}}//刻度宽度/字体颜色
            },

            series: [{
                name: '销量',
                type: 'bar',
                barWidth: '6',
                itemStyle: {normal: {barBorderRadius:[2, 2, 2, 2]}},
                data: [100,90,80,70,60,50,40,30,20,10]
            }],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };
        Leaderboard.setOption(Leaderboardoption);
        //切换排行榜
        form.on('select(LeaderboardSel)', function(data){
            Leaderboard.dispose();
            var selectId=data.value;
            if(selectId==1){
                Leaderboard = echarts.init(document.getElementById('Leaderboard'),'themeBlue');
                Leaderboard.setOption(Leaderboardoption);
            }else if(selectId==2){
                Leaderboard = echarts.init(document.getElementById('Leaderboard'),'themeRed');
                Leaderboard.setOption(Leaderboardoption);
            }else if(selectId==3){
                Leaderboard = echarts.init(document.getElementById('Leaderboard'),'themeGreen');
                Leaderboard.setOption(Leaderboardoption);
            }if(selectId==4){
                Leaderboard = echarts.init(document.getElementById('Leaderboard'),'themeOrange');
                Leaderboard.setOption(Leaderboardoption);
            }
        });
        /*排行榜 end*/


        /*单曲线*/
        var Lineoption ={
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line',
                    lineStyle:{
                        width:1,
                        type:'dashed',
                        color:'#c5c9ce'
                    },
                    transitionDuration:0
                }
            },
            grid: {left: '2%', right:'2%', top:40, bottom:3, containLabel: true},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                offset:5,
                data: ['01','02','03','04','05','06','07','08','09','10','11','12'], //显示时间
                axisLine:{
                    lineStyle:{
                        color:'#e4e9f1',
                        width:1,
                        type:'solid'
                    }
                },
                axisLabel: {show: true},
                axisTick:{show:false}
            },
            yAxis: {
                type: 'value',
                offset:10,
                axisLine:{lineStyle:{color:'#858585', width:0}},
                splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}},
                axisTick:{show:false}
            },
            series: [
                {
                    type:'line',
                    name:'流量消耗',
                    data:[50, 70, 80, 90, 85, 105, 80, 90, 70, 150, 120, 135],
                    symbol:'circle',
                    symbolSize:1
                }
            ],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };

        var Line = echarts.init(document.getElementById('Line'),'themeRed');
        Line.setOption(Lineoption);

        //单曲线Tab切换
        var LineTab = echarts.init(document.getElementById('LineTab'),'themeBlue');
        LineTab.setOption(Lineoption);

        $('#czxf').click(function(){
            LineTab.dispose();
            // 基于准备好的dom，初始化echarts实例
            LineTab = echarts.init(document.getElementById('LineTab'),'themeBlue');
            // 使用刚指定的配置项和数据显示图表。
            LineTab.setOption(Lineoption);
        });
        $('#dkll').click(function(){
            LineTab.dispose();
            // 基于准备好的dom，初始化echarts实例
            LineTab = echarts.init(document.getElementById('LineTab'),'themeRed');
            // 使用刚指定的配置项和数据显示图表。
            LineTab.setOption(Lineoption);
        });
        /*单曲线 end*/

        /*大屏单曲线*/
        var LineTabBig = echarts.init(document.getElementById('LineTabBig'),'themeRed');
        var LineTabBigoption ={
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line',
                    lineStyle:{width:1, type:'dashed', color:'#c5c9ce'},
                    transitionDuration:0
                }
            },
            grid: {left:'1%', right:'1%', top:40, bottom:3, containLabel: true},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                offset:5,
                data: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'], //显示时间
                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisLabel: {show: true},
                axisTick:{show:false}
            },
            yAxis: {
                type: 'value',
                offset:10,
                axisLine:{lineStyle:{color:'#858585', width:0}},
                axisTick:{show:false},
                splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}
            },
            series: [
                {
                    type:'line',
                    name:'充值金额',
                    data:[100, 150, 160, 190, 200, 195, 250,260, 250, 240, 235, 250,180, 150, 160, 190, 200, 195, 250,260, 250, 240, 235, 250,180, 150, 160, 190, 200, 195, 250,260, 250, 240, 235, 250],
                    symbol:'circle',
                    symbolSize:5
                }
            ],
            textStyle: {color: '#666', fontFamily:'Arial'}

        };
        LineTabBig.setOption(LineTabBigoption);


        $('#czxf1').click(function(){
            LineTabBig.dispose();
            // 基于准备好的dom，初始化echarts实例
            LineTabBig = echarts.init(document.getElementById('LineTabBig'),'themeBlue');
            // 使用刚指定的配置项和数据显示图表。
            LineTabBig.setOption(LineTabBigoption);
        });
        $('#czyj').click(function(){
            LineTabBig.dispose();
            // 基于准备好的dom，初始化echarts实例
            LineTabBig = echarts.init(document.getElementById('LineTabBig'),'themeRed');
            // 使用刚指定的配置项和数据显示图表。
            LineTabBig.setOption(LineTabBigoption);
        });
        /*大屏单曲线 end*/

        /*曲线&柱状 组合*/
        var LineBar = echarts.init(document.getElementById('LineBar'));
        var LineBaroption ={
            color:['#58b6ec','#ff6f76'],
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line',
                    lineStyle:{width:1, type:'dashed', color:'#c5c9ce'},
                    transitionDuration:0
                }
            },
            grid: {left: '2%', right:'2%', top:40, bottom:30, containLabel: true},
            legend: {
                selectedMode:false,
                orient: 'horizontal',
                bottom:'-4',
                data:[
                    {name:'激活数', icon:'roundRect'},
                    {name:'流量消耗', icon:'roundRect'}
                ],
                itemWidth:10,
                itemHeight:10,
                textStyle:{fontFamily:'MicrosoftYaHei'}
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                offset:5,
                data: ['01','02','03','04','05','06','07','08','09','10','11','12'],//X轴单位数值
                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#666'
                    }
                },
                axisTick:{show:false}
            },
            yAxis: [
                {
                    type: 'value',
                    offset:10,
                    axisLine:{lineStyle:{color:'#858585', width:0}},
                    axisTick:{show:false},
                    splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}
                },
                {
                    type: 'value',
                    offset:10,
                    axisLine:{lineStyle:{color:'#858585', width:0}},
                    splitLine: {show: false},
                    axisTick:{show:false}
                }
            ],
            series: [

                {
                    name:'激活数',
                    type:'bar',
                    barWidth:10,
                    z:2,
                    data:[100, 70, 80, 90, 85, 105, 803, 90, 70, 152, 120, 135],//发卡激活量数值
                    itemStyle: {normal: {barBorderRadius:[2, 2, 0, 0]}}
                },
                {
                    name:'流量消耗',
                    type:'line',
                    yAxisIndex: 1,
                    z:1,
                    symbol:'circle',
                    symbolSize:1,
                    data:[100, 70, 80, 90, 85, 105, 80, 90, 70, 150, 120, 135]//流量消耗情况数值

                }
            ],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };
        LineBar.setOption(LineBaroption);
        /*曲线&柱状*/


        /*单曲线与多柱状图*/
        //时间
        var timeWeek=['10/01', '10/02', '10/03', '10/04','10/05','10/06', '10/07'];
        var timeMonth=['05/01', '05/02', '05/03', '05/04','05/05','05/06', '05/07','05/08','05/09', '05/10','05/11', '05/12', '05/13', '05/14', '05/15','05/16', '05/17', '05/18', '05/19', '05/20', '05/21', '05/22', '05/23', '05/24', '05/25','05/26','05/27','05/28','05/2','05/30','05/31'];

        //7天数据
        var WeekTotal=[1050,918,980,1090,1078,1155,1450];
        var Week10086= [320,200,310,300,380,370,350];
        var Week10000= [520,480,220,550,448,405,620];
        var Week10010= [210,238,450,240,250,380,480];

        //30天数据
        var MonthTotal=[1050,918,980,1090,1078,1155,1450,1050,918,980,1090,1078,1155,1450,1050,918,980,1090,1078,1155,1450,1050,918,980,1090,1078,1155,1450,1078,1155,1450];
        var Month10086= [320,200,310,300,380,370,350,320,200,310,300,380,370,350,320,200,310,300,380,370,350,320,200,310,300,380,370,350,380,370,350];
        var Month10000= [520,480,220,550,448,405,620,520,480,220,550,448,405,620,520,480,220,550,448,405,620,520,480,220,550,448,405,620,448,405,620];
        var Month10010= [210,238,450,240,250,380,480,210,238,450,240,250,380,480,210,238,450,240,250,380,480,210,238,450,240,250,380,480,250,380,480];

        var multiLineBar = echarts.init(document.getElementById('multiLineBar'),'themeDate7');
        function  configMultiLineBaroption(timeWeekx,WeekTotal01,Week1008601,Week1000001,Week1001001) { //共有数据源配置
            var multiLineBaroption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer:{
                        type:'line',
                        lineStyle:{
                            width:1,
                            type:'dashed',
                            color:'#c5c9ce'
                        }, transitionDuration:0
                    }

                },

                grid: {left: '0', right:'0', top:40, bottom:30, containLabel: true},
                legend: {
                    selectedMode:false,
                    orient: 'horizontal',
                    bottom:-4,
                    itemWidth:10,
                    itemHeight:10,
                    data:['总流量','移动','电信','联通'],
                    textStyle:{fontFamily:'MicrosoftYaHei'}

                },
                xAxis: {
                    type: "category",
                    //boundaryGap:true,
                    interval: 50,
                    boundaryGap:[20, 1],
                    // offset:5,
                    data:timeWeekx,
                    axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                    axisLabel: {show: true, textStyle: {color: '#666'}},
                    axisTick:{show:false}
                },

                yAxis:{
                    type: 'value',
                    offset:0,
                    axisTick:{show:false},//去掉刻度
                    axisLine:{lineStyle:{color:'#858585', width:0}},//刻度宽度/字体颜色
                    splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}
                },
                series: [

                    {
                        name:'总流量',
                        type:'line',
                        data:WeekTotal01

                    },
                    {
                        name:'移动',
                        type:'bar',
                        itemStyle: {normal: {barBorderRadius:[2, 2, 0, 0]}},
                        data:Week1008601
                    },
                    {
                        name:'电信',
                        type:'bar',
                        itemStyle: {normal: {barBorderRadius:[2, 2, 0, 0]}},
                        data:Week1000001

                    },
                    {
                        name:'联通',
                        type:'bar',
                        itemStyle: {normal: {barBorderRadius:[2, 2, 0, 0]}},
                        data:Week1001001//
                    }
                ],
                textStyle: {color: '#666', fontFamily:'Arial'}

            };
            multiLineBar.setOption(multiLineBaroption);
        }
        configMultiLineBaroption(timeWeek,WeekTotal,Week10086,Week10000,Week10010);
        $('#week').click(function(){
            multiLineBar.dispose();
            // 基于准备好的dom，初始化echarts实例
            multiLineBar = echarts.init(document.getElementById('multiLineBar'),'themeDate7');
            configMultiLineBaroption(timeWeek,WeekTotal,Week10086,Week10000,Week10010);
            // 使用刚指定的配置项和数据显示图表。
            multiLineBar.setOption(multiLineBaroption);
        });
        $('#month').click(function(){
            multiLineBar.dispose();
            // 基于准备好的dom，初始化echarts实例
            multiLineBar = echarts.init(document.getElementById('multiLineBar'),'themeDate30');
            configMultiLineBaroption(timeMonth,MonthTotal,Month10086,Month10000,Month10010);
            // 使用刚指定的配置项和数据显示图表。
            multiLineBar.setOption(multiLineBaroption);
        });
        /*单曲线与多柱状图 end*/

        /*地图*/
        var MapBox = echarts.init(document.getElementById('Map'));
        var MapBoxoption ={
            tooltip : {trigger: 'item'},
            visualMap: {
                type:'piecewise',
                splitNumber:6,
                align:'left',
                min: 0,
                max:8000,
                itemWidth:5,
                textGap:10,
                itemHeight:15,
                itemGap:2,
                right: 10,
                bottom:30,
                showLabel:true,
                text:['高','低'],
                calculable : true,
                inRange: {
                    color: ['#e0f3fe', '#9cdbff', '#58b6ec']
                },
                textStyle: {
                    color: '#858585'
                },
                pieces: [
                    {min: 4001, max: 5000},
                    {min: 3001, max: 4000},
                    {min: 2001,max: 3000},
                    {min: 1001,max: 2000},
                    {min: 501,max: 1000},
                    {min: 0,max: 500}
                ]
            },
            series : [
                {
                    name: '设备分布数量',
                    type: 'map',
                    mapType: 'china',
                    zoom:1.20,
                    roam: false,
                    label: {
                        normal: {
                            show:true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle:{
                        borderWidth:0,
                        borderColor:'#fff'
                    },
                    data:[
                        {name: '北京', value: 5000},
                        {name: '天津',value: 1464},
                        {name: '上海',value: 3515},
                        {name: '重庆',value: 2656},
                        {name: '河北',value: 2468},
                        {name: '河南',value: 1256},
                        {name: '云南',value: 980},
                        {name: '辽宁',value: 3222},
                        {name: '黑龙江',value: 800},
                        {name: '湖南',value: 235},
                        {name: '安徽',value: 1131},
                        {name: '山东',value: 4841},
                        {name: '新疆',value: 11},
                        {name: '江苏',value: 1321},
                        {name: '浙江',value: 1546},
                        {name: '江西',value: 25},
                        {name: '湖北',value: 1235},
                        {name: '广西',value: 1564},
                        {name: '甘肃', value: 2222},
                        {name: '山西',value: 3333},
                        {name: '内蒙古',value: 20},
                        {name: '陕西',value: 466},
                        {name: '吉林',value: 356},
                        {name: '福建',value: 1464},
                        {name: '贵州',value: 1321},
                        {name: '广东',value: 5000},
                        {name: '青海', value: 700},
                        {name: '西藏',value: 1654},
                        {name: '四川',value: 1465},
                        {name: '宁夏',value: 1224},
                        {name: '海南',value: 1567},
                        {name: '台湾',value: 234},
                        {name: '香港',value: 4543},
                        {name: '澳门',value: 1243}
                    ]
                }
            ],
            textStyle: {color: '#666', fontFamily:'Arial'}
        };
        MapBox.setOption(MapBoxoption);
        MapBox.on('click', function (params) {
            var city = params.name;//获取名
            var city1 = params.dataIndex;//获取id
            //alert(city+city1);
        });
        /*地图end*/


        /*地图曲线*/
        var mapline = echarts.init(document.getElementById('mapline'));
        var maplineoption ={
            color:['#58b6ec','#ffb54b'],
            grid: {left: '2%', right:'2%',top:30, bottom:30, containLabel: true},
            legend: {
                selectedMode:false,
                orient: 'horizontal',
                bottom:-4,
                data:[
                    {name:'设备激活数', icon:'roundRect'},
                    {name:'设备在线数', icon:'roundRect'}
                ],
                itemWidth:10,
                itemHeight:10,
                textStyle:{fontFamily:'MicrosoftYaHei'}
            },
            tooltip: {trigger: 'axis'},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                offset:5,
                data: ['01','02','03','04','05','06','07','08','09','10','11','12'],//客户卡激活数量X轴单位
                axisLine:{lineStyle:{color:'#e4e9f1', width:1, type:'solid'}},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#666'
                    }
                },
                axisTick:{show:false}

            },
            yAxis: {
                type: 'value',
                offset:10,
                axisLine:{lineStyle:{color:'#666', width:0}},
                axisTick:{show:false},
                splitLine: {show: true, lineStyle:{color:'#d1d8df', type:'dashed'}}


            },
            series: [
                //客户卡激活数量-曲线数值设置
                {
                    name:'设备激活数',
                    type:'line',
                    data:[232, 328, 357, 296, 275, 319, 326,232, 328, 275, 319, 326],
                    symbol:'circle',
                    symbolSize:1
                },
                {
                    name:'设备在线数',
                    type:'line',
                    data:[122, 238, 217, 186, 175, 219, 226,232, 328, 357, 296, 275],
                    symbol:'circle',
                    symbolSize:1
                }
            ],
            textStyle: {color: '#666', fontFamily:'Arial'}

        };
        mapline.setOption(maplineoption);
        /*地图曲线*/



        //删除模块
        $(document).on('click', '.DelBtn', function(){
            // var gridsterRow =$(this).parent().parent().attr('id');//获取当前li模块id
            gridster.remove_widget($(this).parent().parent());
        });

        //切换模块
        $(document).on('click', '.SwitchBtn', function(){
            var gridsterRow =$(this).parent().parent().attr("data-id");//获取当前模块
            top.layer.open({
                type:1,
                fix: false, //不固定
                maxmin: true,
                move:false,
                area:'500px',
                btnAlign: 'r',
                skin:'layerOpen',
                shade:0.2,
                title: '切换',
                content: "" +
                    "<div class='layerOpenCont'><div class='echartsSel'><form class='layui-form' action=''>" +
                    "<h3>请选择报表：</h3>" +
                    "<ul>" +
                    "<li><input type='radio' name='echartsSwitch' value='1' title='单卡流量平均消耗'></li>" +
                    "<li><input type='radio' name='echartsSwitch' value='2' title='各套餐平均流量消耗'></li>" +
                    "<li><input type='radio' name='echartsSwitch' value='3' title='下游渠道卡激活数TOP10'></li>" +
                    "<li><input type='radio' name='echartsSwitch' value='4' title='客户使用激活续费TOP10'></li>" +
                    "</ul></form></div></div>",
                success: function(layero, index){top.form.render();},
                btn:['取消','确定'],
                btn2:function () {
                    var echartsId =top.$('input[name="echartsSwitch"]:checked').val();
                    if(echartsId==1){
                        $('#echarts'+gridsterRow).html('' +
                            '<div class="gridsterEditBox" style="display:block"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                            '<div class="Home-title">单卡流量平均消耗</div>' +
                            '<div class="Home-filter" style="display: none"><form class="layui-form"><div class="select"><select lay-filter=""><option value="按量统计">客户1</option><option value="按量统计1">客户2</option></select></div><div class="select"><select lay-filter=""><option value="按量统计">本周</option><option value="按量统计1">客户2</option></select></div></form></div>' +
                            '<div class="dataCont">' +
                            '<div class="unitBox"><div class="unitLeft">数量/张</div></div>' +//表格数据单位 ps：每个模板对应的表格数据显示不一样 <div class="unitright">数量/张</div> 右对齐  <div class="unitBottom">数量/张</div>底部右对齐
                            '<div id="Switch1" class="echartsBox" ></div>' +//表格数据容器
                            '</div>' +
                            "");

                        var echartsAdd = echarts.init(document.getElementById('Switch1'));
                        echartsAdd.setOption(MultiCurveoption);
                        form.render();
                        top.success('操作成功')


                    }else if(echartsId==2){
                        $('#echarts'+gridsterRow).html('' +
                            '<div class="gridsterEditBox" style="display:block"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                            '<div class="Home-title">各套餐平均流量消耗</div>' +
                            '<div class="Home-filter" style="display: none"><form class="layui-form"><div class="select"><select lay-filter=""><option value="200M">200M</option><option value="500M">500M</option></select></div><div class="select"><select lay-filter=""><option value="2017">2017</option><option value="2018">2018</option></select></div></form></div>'+
                            '<div class="dataCont">' +
                            '<div class="unitBox"><div class="unitLeft">流量/M</div></div>' +//表格数据单位 ps：每个模板对应的表格数据显示不一样 <div class="unitright">数量/张</div> 右对齐  <div class="unitBottom">数量/张</div>底部右对齐
                            '<div id="echartsAdd2" class="echartsBox" ></div>' +//表格数据容器
                            '</div>' +
                            "");

                        var echartsAdd = echarts.init(document.getElementById('echartsAdd2'));
                        echartsAdd.setOption(LineBaroption);
                        form.render();
                        top.success('操作成功')

                    }else if(echartsId==3){
                        $('#echarts'+gridsterRow).html('' +
                            '<div class="gridsterEditBox" style="display:block"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                            '<div class="Home-title">下游渠道卡激活数TOP10</div>' +
                            '<div class="dataCont">' +
                            '<div class="unitBox"><div class="unitBottom">流量/M</div></div>'+
                            '<div id="echartsAdd3" class="echartsBox" ></div>' +//表格数据容器
                            '</div>' +
                            "");
                        var echartsAdd = echarts.init(document.getElementById('echartsAdd3'),'themeRed');
                        echartsAdd.setOption(Leaderboardoption);
                        top.success('操作成功')

                    }else if(echartsId==4){
                        $('#echarts'+gridsterRow).html('' +
                            '<div class="gridsterEditBox" style="display:block"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                            '<div class="Home-title">客户使用激活续费TOP10</div>' +
                            '<div class="dataCont">' +
                            '<div class="unitBox"><div class="unitBottom">流量/M</div></div>' +//表格数据单位 ps：每个模板对应的表格数据显示不一样 <div class="unitright">数量/张</div> 右对齐  <div class="unitBottom">数量/张</div>底部右对齐
                            '<div id="echartsAdd4" class="echartsBox" ></div>' +//表格数据容器
                            '</div>' +
                            "");
                        var echartsAdd = echarts.init(document.getElementById('echartsAdd4'),'themeBlue');
                        echartsAdd.setOption(Leaderboardoption);
                        top.success('操作成功')

                    }else {
                        top.layer.msg('请选择报表')
                    }
                    return false
                }
            })
        });
        //添加模块
        $('#addECharts').click(function () {

            top.layer.open({
                type:1,
                fix: false, //不固定
                maxmin: true,
                move:false,
                area:'500px',
                btnAlign: 'r',
                skin:'layerOpen',
                shade:0.2,
                title: '添加报表',
                content: "" +
                    "<div class='layerOpenCont'><div class='echartsSel'>" +
                    "<form class='layui-form' action=''><h3>请选择报表（多选）：</h3><ul>" +
                    "<li><input type='checkbox' name='echartsAdd' title='物联网卡生命周期' value='0' lay-skin='primary' disabled checked></li>" +
                    "<li><input type='checkbox' name='echartsAdd' title='单卡流量平均消耗' value='1' lay-skin='primary'></li>" +
                    "<li><input type='checkbox' name='echartsAdd' title='各套餐平均流量消耗' value='2' lay-skin='primary'></li>" +
                    "<li><input type='checkbox' name='echartsAdd' title='下游渠道卡激活数TOP10' value='3' lay-skin='primary'></li>" +
                    "<li><input type='checkbox' name='echartsAdd' title='客户使用激活续费TOP10' value='4' lay-skin='primary'></li>" +
                    "</ul></form></div></div> ",
                success: function(layero, index){top.form.render();},
                btn:['取消','确定'],
                btn2:function () {
                    //获取所选按钮
                    var echartsAddSel=top.$("input[name=echartsAdd]:checked").length;
                    if (echartsAddSel==0){
                        top.layer.msg('请选择图表')
                    }else {
                        $.each(top.$('input:checkbox:checked'),function(){
                            var echartsId=$(this).val();
                            if(echartsId == 1){
                                gridster.add_widget('<li class="new">' +
                                    '<div class="gridsterEditBox"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                                    '<div class="Home-title">单卡流量平均消耗</div>' +
                                    '<div class="Home-filter"><form class="layui-form"><div class="select"><select lay-filter=""><option value="按量统计">客户1</option><option value="按量统计1">客户2</option></select></div><div class="select"><select lay-filter=""><option value="按量统计">本周</option><option value="按量统计1">客户2</option></select></div></form></div>' +
                                    '<div class="dataCont">' +
                                    '<div class="unitBox"><div class="unitLeft">数量/张</div></div>' +//表格数据单位 ps：每个模板对应的表格数据显示不一样 <div class="unitright">数量/张</div> 右对齐  <div class="unitBottom">数量/张</div>底部右对齐
                                    '<div id="echartsAdd1" class="echartsBox" ></div>' +//表格数据容器
                                    '</div>' +
                                    '</li>', 2, 3);//占用行数2  占用列数3
                                var echartsAdd = echarts.init(document.getElementById('echartsAdd1'));
                                echartsAdd.setOption(MultiCurveoption);
                                form.render();

                                //top.success('操作成功')

                                top.layer.closeAll();
                                //top.success('操作成功')
                                //top.closeBtn()


                            }else if(echartsId == 2){
                                gridster.add_widget('<li class="new">' +
                                    '<div class="gridsterEditBox"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                                    '<div class="Home-title">各套餐平均流量消耗</div>' +
                                    '<div class="Home-filter"><form class="layui-form"><div class="select"><select lay-filter=""><option value="200M">200M</option><option value="500M">500M</option></select></div><div class="select"><select lay-filter=""><option value="2017">2017</option><option value="2018">2018</option></select></div></form></div>'+
                                    '<div class="dataCont">' +
                                    '<div class="unitBox"><div class="unitLeft">流量/M</div></div>' +//表格数据单位 ps：每个模板对应的表格数据显示不一样 <div class="unitright">数量/张</div> 右对齐  <div class="unitBottom">数量/张</div>底部右对齐
                                    '<div id="echartsAdd2" class="echartsBox" ></div>' +//表格数据容器
                                    '</div>' +
                                    '</li>', 2, 3);//占用行数2  占用列数3
                                var echartsAdd = echarts.init(document.getElementById('echartsAdd2'));
                                echartsAdd.setOption(LineBaroption);
                                form.render();
                                top.success('操作成功')

                            }else if(echartsId == 3){
                                gridster.add_widget('<li class="new">' +
                                    '<div class="gridsterEditBox"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                                    '<div class="Home-title">下游渠道卡激活数TOP10</div>' +
                                    '<div class="dataCont">' +
                                    '<div class="unitBox"><div class="unitBottom">流量/M</div></div>'+
                                    '<div id="echartsAdd3" class="echartsBox" ></div>' +//表格数据容器
                                    '</div>' +
                                    '</li>', 2, 3);//占用行数2  占用列数3
                                var echartsAdd = echarts.init(document.getElementById('echartsAdd3'),'themeRed');
                                echartsAdd.setOption(Leaderboardoption);
                                top.layer.closeAll();
                                //top.success('操作成功')

                            }else if(echartsId == 4){
                                gridster.add_widget('<li class="new">' +
                                    '<div class="gridsterEditBox"><a href="javascript:;" class="SwitchBtn">切换</a><a href="javascript:;" class="DelBtn">删除</a></div>' +
                                    '<div class="Home-title">客户使用激活续费TOP10</div>' +
                                    '<div class="dataCont">' +
                                    '<div class="unitBox"><div class="unitBottom">流量/M</div></div>' +//表格数据单位 ps：每个模板对应的表格数据显示不一样 <div class="unitright">数量/张</div> 右对齐  <div class="unitBottom">数量/张</div>底部右对齐
                                    '<div id="echartsAdd4" class="echartsBox" ></div>' +//表格数据容器
                                    '</div>' +
                                    '</li>', 2, 3);//占用行数2  占用列数3
                                var echartsAdd = echarts.init(document.getElementById('echartsAdd4'),'themeBlue');
                                echartsAdd.setOption(Leaderboardoption);
                                top.success('操作成功')

                            }
                        });
                    }
                    return false
                }
            })

        });

    });
    /*****************************************************echarts 数据 end************************************************************/
</script>
</body>
</html>